import { useState } from "react"
import { CardDetails } from "../CardDetails"
import { IfElse } from "../IfElse/IfElse"
import { Button } from "../ui/button"
import { ChevronUp } from "lucide-react"
import { TextArea } from "../Customs"

interface Props {
  task: Task;
  checkList?: boolean
}

export const DrawerSubtask = ({ task, checkList }: Props) => {
  return (
    <div >
      <IfElse>
        <IfElse.When isTrue={!!task?.subtasks} >
          {task.subtasks
            .map(
              (subtask, index) => <Subtask key={index} subtask={subtask} checkList={checkList} />
            )
          }
        </IfElse.When>
      </IfElse>
    </div>
  )
}


const Subtask = ({ subtask, checkList }: { subtask: Task, checkList?: boolean }) => {
  const [isShowSubs, setIsShowSubs] = useState(false)
  const [task, setTask] = useState(subtask)

  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>, name = 'name') => {
    setTask((prev) => ({ ...prev, [name]: e.target.value }));
  };


  return <div className="mb-3" >
    <h2 className="text-base mb-1" >{task.name}</h2>
    <CardDetails data={task} />

    <IfElse>
      <IfElse.When isTrue={!checkList}>
        <TextArea
          defaultValue=""
          value=""
          onChange={handleInputChange}
          placeholder='Описание подзадачи'
          height={36}
          className="bg-slate-50 text-lg px-2 placeholder:text-slate-400"
        />

      </IfElse.When>
    </IfElse>
    <IfElse>
      <IfElse.When isTrue={!!subtask.subtasks} >
        <div className="ml-12" >
          <Button variant={'ghost'} className='p-0 my-2 hover:bg-transparent text-xl text-slate-400 flex items-center' onClick={() => setIsShowSubs(p => !p)}>
            Чек-лист <ChevronUp size={18} className={`mt-[3px] transition-transform ${!isShowSubs ? 'rotate-180' : ''}`} />
          </Button>
          {isShowSubs && <DrawerSubtask task={task} checkList />}
          <IfElse>
            <IfElse.When isTrue={!checkList}>
              <TextArea
                defaultValue={task.text}
                value={task.text}
                onChange={(e) => handleInputChange(e, 'text')}
                placeholder='Добавить'
                height={28}
                className="bg-slate-50 text-sm px-2 placeholder:text-slate-400"
              />
            </IfElse.When>
          </IfElse>
        </div>
      </IfElse.When>
    </IfElse>
  </div >
} 